<script setup>
import {inject, computed} from 'vue'
import {useRouter} from 'vue-router'
import {ElDrawer, ElImage, ElBadge} from 'element-plus'

const router=useRouter()
const model=defineModel()

//登录相关逻辑
const userinfo=inject("userinfo")
const badge=inject('badge')

//点击图标跳转
function handleClickItem(target){
    model.value=false
    router.push({name:target})
}

const manage_badge=computed(()=>{
    return badge.talent_audit_count
})
</script>
<template>
<el-drawer
        v-model="model"
        direction="ttb"
        size="auto"
      >
        <template v-slot:header>
            <div style="display:flex; align-items:center;">
                <el-image src="/img/icons/菜单.png" style="width:20px; height:20px; margin-right:5px;"/>
                <span style="font-weight:bolder; font-size:medium;">菜单</span>
            </div>
        </template>
        <div class="main">
            <div class="item" @click="handleClickItem('首页')">
                <el-badge value="">
                    <el-image src="/img/icons/首页.png" class="icon"/>
                </el-badge>
                <div class="name">首页</div>
            </div>
            <div class="item" @click="handleClickItem('资源池')">
                <el-badge value="">
                    <el-image src="/img/icons/资源池.png" class="icon"/>
                </el-badge>
                <div class="name">资源池</div>
            </div>
            <div class="item" @click="handleClickItem('需求池')">
                <el-badge value="">
                    <el-image src="/img/icons/需求池.png" class="icon"/>
                </el-badge>
                <div class="name">需求池</div>
            </div>
            <div class="item" @click="handleClickItem('专家服务')">
                <el-badge value="">
                    <el-image src="/img/icons/专家服务.png" class="icon"/>
                </el-badge>
                <div class="name">专家服务</div>
            </div>
            <div class="item" @click="handleClickItem('机构清单')">
                <el-badge value="">
                    <el-image src="/img/icons/机构主页.png" class="icon"/>
                </el-badge>
                <div class="name">机构清单</div>
            </div>
            <div class="item" @click="handleClickItem('资讯窗口')">
                <el-badge value="">
                    <el-image src="/img/icons/资讯窗口.png" class="icon"/>
                </el-badge>
                <div class="name">资讯窗口</div>
            </div>
            <div class="item" @click="handleClickItem('管理入口')" v-show="userinfo">
                <el-badge :value="manage_badge==0?'':manage_badge">
                    <el-image src="/img/icons/管理入口.png" class="icon"/>
                </el-badge>
                <div class="name">管理入口</div>
            </div>
            <div class="item" @click="handleClickItem('用户中心')" v-show="userinfo">
                <el-badge value="">
                    <el-image src="/img/icons/用户中心.png" class="icon"/>
                </el-badge>
                <div class="name">用户中心</div>
            </div>
        </div>
      </el-drawer>
</template>
<style scoped>
.main{
    display:flex;
    flex-wrap:wrap;
    background-color:white;
    max-width:1024px;
    margin:0 auto;
}
.item{
    display:flex;
    flex-flow:column;
    align-items:center;
    margin:10px 10px;
    cursor:pointer;
}
.icon{
    background-color:var(--el-color-primary-light-9);
    width:50px;
    height:50px;
    border-radius:5px;
    padding:5px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px, rgba(0, 0, 0, 0.3) 0px 3px 6px -1px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
}
.icon:hover{
    background-color:var(--el-color-warning-light-9);
}
.icon:active{
    background-color:var(--el-color-error-light-9);
}
</style>